<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>小米商城-小米官方网站，小米手机、红米手机正品专卖</title>
    <link rel="icon" href="./img/milogo.ico">
    <link rel="stylesheet" href="./font/iconfont.css">
    <link rel="stylesheet" href="./css/gonggong.css">
    <link rel="stylesheet" href="./css/shouji.css">
</head>

<body>
    <!-- 头部 -->
    <div class="header">
        <div class="app-header-wrapper">
            <div class="app-header-logo">
                <img src="./img/milogo.png" alt="">
            </div>
            <div class="app-header-search">
                <i class="iconfont icon-sousuo"></i>
                <input class="search" type="text" placeholder="搜索商品名称">
            </div>
            <div class="app-header-user">
                <i class="iconfont icon-gerenzhongxin"></i>
            </div>
        </div>
        <div class="nav-wrap">
            <div class="nav-item">
                <a href="./小米移首页(移动端).html">推荐</a>
            </div>
            <div class="nav-item">
                <a class="active" href="./小米手机(移动端).html">手机</a>
            </div>
            <div class="nav-item">
                <a href="./小米智能(移动端).html">智能</a>
            </div>
            <div class="nav-item">
                <a href="./小米电视(移动端).html">电视</a>
            </div>
            <div class="nav-item">
                <a href="./小米家电(移动端).html">家电</a>
            </div>
            <div class="nav-item">
                <a href="./小米笔记本(移动端).html">笔记本</a>
            </div>
            <div class="nav-display">
                <i class="iconfont icon-xiala"></i>
            </div>
        </div>
    </div>
    <!-- 热卖手机 -->
    <div class="mi-hot">
        <a href="#">
            <img src="./img/小米11热卖榜单.webp" alt="">
        </a>
    </div>
    <!-- 主要内容 -->
    <div class="content">
        <div class="divider_line"></div>
        <!-- 热卖榜单 -->
        <div class="h52">
            <a href="#"><img src="./img/热卖榜单.webp" alt=""></a>
        </div>
        <div class="divider_line"></div>
        <div class="panel">
            <div class="panel-item">
                <a href="#">
                    <img src="./img/Note 9 Pro 5G.webp" alt="">
                </a>
            </div>
            <div class="divider_line"></div>

            <div class="panel-item">
                <a href="#">
                    <img src="./img/小米10 青春版.webp" alt="">
                </a>
            </div>
        </div>
        <div class="divider_line"></div>
        <!-- 科技头条 -->
        <div class="h52">
            <a href="#"><img src="./img/科技头条.webp" alt=""></a>
        </div>
        <div class="divider_line"></div>
        <!-- 十足马力 -->
        <div class="h57">
            <a href="#"><img src="./img/十足马力.webp" alt=""></a>
        </div>
        <div class="divider_line"></div>
        <div class="goods-list">
            <div class="item-md">
                <a href="#">
                    <img src="./img/Redmi 9A.jpg" alt="">
                </a>
                <div class="info-box">
                    <div class="name">小米11 Pro</div>
                    <div class="brief">1.12''GN2｜骁龙888</div>
                    <div class="price">
                        ￥499<span>起</span>
                    </div>
                    <a class="buybtn"> 立即购买</a>
                </div>
            </div>
            <div class="item-md">
                <a href="#">
                    <img src="./img/Redmi 10X 4G.jpg" alt="">
                </a>
                <div class="info-box">
                    <div class="name">Redmi 10X 4G</div>
                    <div class="brief">5020mAh超长续航，128GB大内存，4800万超清四摄</div>
                    <div class="price">
                        ￥999<span>起</span>
                    </div>
                    <a class="buybtn"> 立即购买</a>
                </div>
            </div>
        </div>
        <div class="divider_line"></div>
        <!-- 更多推荐 -->
        <div class="h57">
            <a href="#"><img src="./img/更多推荐.webp" alt=""></a>
        </div>
        <div class="divider_line"></div>
        <div class="goods-list">
            <div class="item-md">
                <a href="#">
                    <img src="./img/Note 9 5G.jpg" alt="">
                </a>
                <div class="info-box">
                    <div class="name">Note 9 5G</div>
                    <div class="brief">天玑 800U处理器，5000mAh电池，小金刚品质</div>
                    <div class="price">
                        ￥1299<span>起</span>
                    </div>
                    <a class="buybtn"> 立即购买</a>
                </div>
            </div>
            <div class="item-md">
                <a href="#">
                    <img src="./img/小米10.jpg" alt="">
                </a>
                <div class="info-box">
                    <div class="name">小米10</div>
                    <div class="brief">骁龙865处理器/1亿像素8K电影相机</div>
                    <div class="price">
                        ￥3399<span>起</span> <del>￥3999</del>
                    </div>
                    <a class="buybtn"> 立即购买</a>
                </div>
            </div>
        </div>
        <div class="divider_line"></div>
        <div class="goods-list">
            <div class="item-md">
                <a href="#">
                    <img src="./img/Note 9 Pro 5G1.jpg" alt="">
                </a>
                <div class="info-box">
                    <div class="name">Note 9 Pro 5G</div>
                    <div class="brief">一亿像素夜景相机，120Hz六档变速高刷屏，国内首发骁龙750G</div>
                    <div class="price">
                        ￥1599<span>起</span>
                    </div>
                    <a class="buybtn"> 立即购买</a>
                </div>
            </div>
            <div class="item-md">
                <a href="#">
                    <img src="./img/Redmi 10X 5G1.jpg" alt="">
                </a>
                <div class="info-box">
                    <div class="name">Redmi 10X 5G</div>
                    <div class="brief">双5G待机，天玑820处理器，4800万流光相机</div>
                    <div class="price">
                        ￥1899<span>起</span> <del>￥2399</del>
                    </div>
                    <a class="buybtn"> 立即购买</a>
                </div>
            </div>
        </div>
        <div class="divider_line"></div>
        <!-- 热卖配件 -->
        <div class="h57">
            <a href="#"><img src="./img/热卖配件.webp" alt=""></a>
        </div>
        <div class="divider_line"></div>
        <div class="goods-list">
            <div class="item-md">
                <a href="#">
                    <img src="./img/小米11素皮仿织保护壳.jpg" alt="">
                </a>
                <div class="info-box">
                    <div class="name">小米11素皮仿织保护壳</div>
                    <div class="brief">仿织设计 | 细腻触感 | 全面包裹 | 坚韧耐用</div>
                    <div class="price">
                        ￥99
                    </div>
                    <a class="buybtn"> 立即购买</a>
                </div>
            </div>
            <div class="item-md">
                <a href="#">
                    <img src="./img/小米11 亲肤软胶保护壳 for玻璃版.jpg" alt="">
                </a>
                <div class="info-box">
                    <div class="name">小米11 亲肤软胶保护壳 for玻璃版</div>
                    <div class="brief">严密贴合手机 | 色彩亮丽 | 洋溢青春气息</div>
                    <div class="price">
                        ￥69
                    </div>
                    <a class="buybtn"> 立即购买</a>
                </div>
            </div>
        </div>
        <div class="divider_line"></div>
        <div class="goods-list">
            <div class="item-md">
                <a href="#">
                    <img src="./img/Redmi充电宝.jpg" alt="">
                </a>
                <div class="info-box">
                    <div class="name">Redmi充电宝</div>
                    <div class="brief">双输入接口，双输出接口，可上飞机</div>
                    <div class="price">
                        ￥59<span>起</span>
                    </div>
                    <a class="buybtn"> 立即购买</a>
                </div>
            </div>
            <div class="item-md">
                <a href="#">
                    <img src="./img/Redmi 手表.jpg" alt="">
                </a>
                <div class="info-box">
                    <div class="name">Redmi 手表</div>
                    <div class="brief">高清彩显大屏，100款潮流表盘/7种运动模式，NFC、小爱多项便携操作/睡眠、心率多维健康管理，7天长续航</div>
                    <div class="price">
                        ￥269 <del>￥299</del>
                    </div>
                    <a class="buybtn"> 立即购买</a>
                </div>
            </div>
        </div>
        <div class="divider_line"></div>
        <div class="goods-list">
            <div class="item-md">
                <a href="#">
                    <img src="./img/小米蓝牙项圈耳机 青春版.webp" alt="">
                </a>
                <div class="info-box">
                    <div class="name">小米蓝牙项圈耳机 青春版</div>
                    <div class="brief">轻盈随心，乐享不停</div>
                    <div class="price">
                        ￥149 <del>￥169</del>
                    </div>
                    <a class="buybtn"> 立即购买</a>
                </div>
            </div>
            <div class="item-md">
                <a href="#">
                    <img src="./img/小米11 星钻保护壳 for 玻璃版.jpg" alt="">
                </a>
                <div class="info-box">
                    <div class="name">小米11 星钻保护壳 for 玻璃版</div>
                    <div class="brief">夺目设计 | 精密工艺 | 紧密贴合</div>
                    <div class="price">
                        ￥299
                    </div>
                    <a class="buybtn"> 立即购买</a>
                </div>
            </div>
        </div>
        <div class="divider_line"></div>
        <div class="goods-list">
            <div class="item-md">
                <a href="#">
                    <img src="./img/小米无线车充.webp" alt="">
                </a>
                <div class="info-box">
                    <div class="name">小米无线车充</div>
                    <div class="brief">电动变形，自动锁紧充电</div>
                    <div class="price">
                        ￥169
                    </div>
                    <a class="buybtn"> 立即购买</a>
                </div>
            </div>
            <div class="item-md">
                <a href="#">
                    <img src="./img/18W USB充电器快充版.webp" alt="">
                </a>
                <div class="info-box">
                    <div class="name">18W USB充电器快充版</div>
                    <div class="brief">美观耐用，充电器也可以成为艺术品</div>
                    <div class="price">
                        ￥29.9
                    </div>
                    <a class="buybtn"> 立即购买</a>
                </div>
            </div>
        </div>
        <div class="divider_line"></div>
    </div>
    <!-- 脚部 -->
    <div class="footer">
        <a class="active" href="#">
            <i class="iconfont icon-shouye"></i>
            <span>首页</span>
        </a>
        <a href="#">
            <i class="iconfont icon-fenlei"></i>
            <span>分类</span>
        </a>
        <a href="#">
            <i class="iconfont icon-wangzhi"></i>
            <span>米圈</span>
        </a>
        <a href="#">
            <i class="iconfont icon-gouwuche"></i>
            <span>购物车</span>
        </a>
        <a href="#">
            <i class="iconfont icon-gerenzhongxin"></i>
            <span>我的</span>
        </a>
    </div>
    <script src="./js/rem.js"></script>
</body>

</html>